
<!-- <template>
    <div>
    <div id="main" style="width:600px;height:300px;"></div>
    
     <el-row>
        <el-col :span="10"><div class="grid-content ep-bg-purple-dark" />
        <ul>
       <li v-for="i in userlist">
       <el-button >{{i.name}}</el-button>
       
       </li>
      
        </ul>
        </el-col>
      
     </el-row>
    
      
      
    </div>
</template>

<script setup>
import {ref,onMounted}  from 'vue'
import {useRoute}  from 'vue-router'

const route = useRoute()

//搜索用的
const socket = ref(null)
const userlist=ref([])
const data=ref()
const userid=route.query.id



const initwesockt=()=>{
    var room = 'kefu'+userid
    alert(room)
    socket.value = new WebSocket("ws://localhost:8000/ws/room/"+room+"/");

    // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
    socket.value.onopen =  (event)=>{
        console.log("连接成功")
    }

    // 回调函数，客户端接收服务端消息
    socket.value.onmessage =  (event)=>{
    
        data.value=JSON.parse(event.data)
        userlist.value.push({"id":data.value.id,'name':data.value.name})
        
    }

    // // 当断开连接时，触发该函数
    // this.socket.onclose =function (event){
    // let tag = document.createElement("div");
    // tag.innerText = "[连接断开]";
    // document.getElementById("message").appendChild(tag);
    // }


}

onMounted(()=>{
    initwesockt()
    
})
</script> -->
    
<!-- 客服端聊天室 -->    
<template>
    <div>
        <h1>客服页面</h1>
        用户列表</br>
        <ul>
            <li v-for="i in userlist">
            <el-button @click="check_users(i.id)">
                {{i.name}}
            </el-button>
        </li>
        </ul>
        消息列表</br>
        <ul>
            <li v-for="i in messagelist">
                {{i.mes}}
            </li>
        </ul>
        <div>
            <el-input v-model="mes" style="width: 240px"/>
            <el-button @click="send">
                发送
            </el-button>
        </div>
    </div>
</template>

<script  setup>
import {ref,onMounted}  from 'vue'
import {useRouter}  from 'vue-router'

//搜索用的
const active1=ref(0)
const socket = ref(null)
const router = useRouter()
const userid= 1001
const userlist=ref([])

const puser = ref()
const usersocket=ref(null)
const messagelist=ref([])
const mes=ref()
const webdict=ref([])
//历史
const hisdict=ref()


const send=()=>{
    usersocket.value.send(JSON.stringify({"mes":mes.value,"to":puser.value , "type":"AI" , "messagelistAI":messagelist.value}))
    mes.value=''
}
const check_users=(userid)=>{
    //判断puser.value是否为空，如果为空
    //如果不为空用puser.value作为key,用消息列表messagelist作为value把上一个的消息存储
    //hisdict[puser.value] = JSON.stringify(messagelist)
    //从hisdict查询userid的历史消息，如果存在 messagelist.value=JSON.parse(),
    //如果没有
    messagelist.value=[]
    puser.value = userid
    if(webdict.value.indexOf(userid)>=0){
        console.log("33")
    }else{
        //创建客户和当前用户聊天的房间
        usersocket.value = new WebSocket("ws://localhost:8000/ws/room/"+userid+"/");
        usersocket.value.onopen =  (event)=>{
            console.log("连接成功")
        }
    }
    

    // 回调函数，客户端接收服务端消息
    usersocket.value.onmessage =  (event)=>{
        
        messagelist.value.push(JSON.parse(event.data))
        console.log(messagelist,"历史记录在这里")
    }
    
}
const initwesockt=()=>{
    const room = userid
    socket.value = new WebSocket("ws://localhost:8000/ws/room/"+room+"/");

    // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
    socket.value.onopen =  (event)=>{
        console.log("连接成功")
    }

    // 回调函数，客户端接收服务端消息
    socket.value.onmessage =  (event)=>{
        const udata = JSON.parse(event.data)
        var flag = true
        userlist.value.forEach((user)=>{
            if(user['id'] == udata['id']){
                flag=false
            }
        })
        if(flag){
            userlist.value.push(udata)

        }
        // hisdict.value.push(udata)
    }


}

onMounted(()=>{
    initwesockt()
})
</script>    